<!DOCTYPE HTML>
<html>
	<head lang="en">
    <meta charset="UTF-8">
		

        <script type="text/javascript">
            //绘制矩形
            // var c = document.getElementById("myCanvas");
            // var cxt = c.getContext("2d");
            // cxt.fillStyle = "#FF0000";
            // cxt.fillRect(20, 20, 100, 50);
            

            //绘制圆
            // var c = document.getElementById("myCanvas");
            // var cxt = c.getContext("2d");
            // cxt.fillStyle = "#ff0000";
            // cxt.beginPath();
            // cxt.arc(50, 50, 30, 0, Math.PI*2, true);
            // cxt.closePath();
            // cxt.fill();
            

            //渐变
            // var c = document.getElementById("myCanvas");
            // var cxt = c.getContext("2d");
            // //xStart为渐变起始地点的横坐标，yStart为渐变起始地点的纵坐标；xEnd为渐变结束地点的横坐标；yEnd为渐变结束地点的纵坐标。
            // var grd = cxt.createLinearGradient(10, 10, 200, 100);
            // grd.addColorStop(0,'#ff0000');  //参数1：表示渐变偏移量  值：0-1之间的浮点数
            // grd.addColorStop(0.5,'blue');
            // grd.addColorStop(1,'#00FF00');
            // cxt.fillStyle = grd;
            // cxt.fillRect(20,20, 200, 100);


            //径向渐变
            function draw(){
                var c=document.getElementById("myCanvas");
                var cxt=c.getContext("2d");
                var grd=cxt.createRadialGradient(150,150,0,150,150,100);
                grd.addColorStop(0.1,"#ff0000");
                grd.addColorStop(1,"#00ff00");
                cxt.fillStyle=grd;
                cxt.fillRect(0,0,400,300);
            }

        
        </script>
	</head>
	<body onload="draw()">

        <canvas id="myCanvas"  width="320" height="320" style="border: 1px solid #dddddd">Yours browser does not support canvas element.</canvas>
		
	</body>
</html>